role.rolePanel = role.rolePanel || Ext.extend(Ext.Panel, {
	    initComponent:function(){
            var panel = this;
		    Ext.apply(this,{
		    	 layout: 'border',
			     border: false,
			     items: [panel.west(),panel.center()]
		    });
		    role.rolePanel.superclass.initComponent.call(this);
	    },
	    west : function(){
	    	var tree = new role.roleTree();
	    	tree.on('click',function(node){
    			Ext.getCmp(role.parentId).items.get(0).items.get(1).getStore().load(
    				{
	    				params:{
	    					start:0, limit:20,id:node.id
	    				}
    				}
    			);
	    	});
	    	return tree;
	    },
	    center : function(){
	    	return new role.roleGrid();
	    }
});

Ext.onReady(function(){
	var isDefer = function(){
		return   typeof(role.win) == 'undefined' ||
		         typeof(role.roleGrid) == 'undefined' ||
				 typeof(role.roleTree) == 'undefined' ||
				 typeof(role.rolePanel) == 'undefuned';
	};
	var initFn = function(){
		var panel = new role.rolePanel();
		var tab = Ext.getCmp(role.parentId);
		tab.add(panel);
		tab.doLayout();
	};
	isDefer() ? initFn.defer(600) : initFn();
});